import React, { useState } from 'react'
import { Layout, Dropdown, Menu, Avatar } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

const { Header } = Layout;

function TopHeader(props) {

  console.log(props)
  const changeCollapsed = () => {
    props.changeCollapsed()
  }

  const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"))

  const menu = (
    <Menu>
      <Menu.Item>
        {roleName}
      </Menu.Item>
      <Menu.Item danger onClick={() => {
        localStorage.removeItem("token")
        // console.log(props.history)
        props.history.replace("/login")
      }}>退出</Menu.Item>
    </Menu>
  );

  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
      {
        props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
      }


      <div style={{ float: "right" }}>
        <span>欢迎<span style={{ color: "#1890ff" }}>{username}</span>回来</span>
        <Dropdown overlay={menu}>
          <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>

  )
}

const mapStateToProps = ({ CollApsedReducer: { isCollapsed } }) => {
  return {
    isCollapsed
  }
}

// 通知redux改变 isCollapsed的状态,，同步修改--此时不涉及前后数据请求
// 也可以不使用第二个参数，mapDispatchToProps
// 直接在页面上使用dispatch，因为，connect高阶方法，自动实现了dispatch的注入
const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: "change_collapsed"

    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))